<!doctype html>
<head>
  <script>
  WCT = {waitFor: function (cb) {HTMLImports.whenReady(cb)}}
  </script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script src="../../node_modules/@webcomponents/webcomponents-platform/webcomponents-platform.js"></script>
  <script src="../../node_modules/es6-promise/dist/es6-promise.auto.min.js"></script>
  <script src="../../node_modules/@webcomponents/template/template.js"></script>
  <script src="../../node_modules/@webcomponents/html-imports/html-imports.min.js"></script>
  <script src="../../node_modules/@webcomponents/shadydom/shadydom.min.js"></script>
  <script src="../../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
  <script src="../../apply-shim.min.js"></script>
  <script src="../../custom-style-interface.min.js"></script>
  <script src="../module/generated/make-element.js"></script>
</head>
<body>
    <div>
      <x-item-a>item A</x-item-a>
      <x-item-b>item B</x-item-b>
    </div>
  <x-menu>
  </x-menu>
  <x-menu-group>
  </x-menu-group>

    <template id="x-item-a">
      <style>
      :host {
        display:block;
        background: rgb(255, 255, 255);
        @apply --item-mixin;
      }
      </style>
      <slot></slot>
    </template>

    <template id="x-menu">
      <style>
        :host {
          display:block;
          border:1px solid black;
          margin:2px;
          --item-mixin:{background:rgb(0, 0, 255);};
        }
      </style>
      <x-item-a>menu item A</x-item-a>
      <x-item-b>menu item B</x-item-b>
    </template>

    <template id="x-group">
      <style>
      :host{
        display:block;
        --item-mixin:{background:rgb(255, 0, 0);};
        }
      </style>
      <x-item-a>group item A</x-item-a>
      <x-item-b>group item B</x-item-b>
    </template>

    <template id="x-menu-group">
      <style>
        :host {
          display:block;
          border:1px solid black;
          margin:2px;
          --item-mixin:{background:rgb(0, 0, 255);};
        }
      </style>
      <x-group></x-group>
    </template>

    <template id="x-item-b">
      <style>
      :host {
        display:block;
        background: rgb(255, 255, 255);
        @apply --item-mixin;
      }
      </style>
      <slot></slot>
    </template>

    <template id="x-dynamic">
      <style>
        :host {
          display: block;
          background: rgb(255, 255, 255);
          @apply --mixin;
        }
      </style>
      <span>dynamic item</span>
    </template>

    <template id="x-dynamic-container">
      <style>
        :host {
          --mixin: {
            background-color: rgb(123, 123, 123);
          };
        }
      </style>
      <x-dynamic></x-dynamic>
    </template>

    <script>
    suite('Mixin Ordering', function() {
      suiteSetup(function() {
        makeElement('x-item-a');
        makeElement('x-menu');
        makeElement('x-group');
        makeElement('x-menu-group');
        makeElement('x-item-b');
      });
      test('mixins are re-evaluated with element upgrade', function() {
        function checkBg(node) {
          var itemA = node.querySelector('x-item-a');
          var itemB = node.querySelector('x-item-b');
          var itemA_BG = getComputedStyle(itemA)['background-color'].trim();
          var itemB_BG = getComputedStyle(itemB)['background-color'].trim();
          assert.equal(itemA_BG, itemB_BG, 'x-item-a and x-item-b should have the same background color');
        }
        checkBg(document.querySelector('div'));
        checkBg(document.querySelector('x-menu').shadowRoot);
        checkBg(document.querySelector('x-menu-group').shadowRoot.querySelector('x-group').shadowRoot);
      });
      test('dynamically updates', function() {
        makeElement('x-dynamic');
        makeElement('x-dynamic-container');
        var container = document.createElement('x-dynamic-container');
        document.body.appendChild(container);
        if (window.ShadyDOM) {
          ShadyDOM.flush();
        }
        assert.equal(getComputedStyle(container.shadowRoot.querySelector('x-dynamic'))['background-color'].trim(), 'rgb(123, 123, 123)');
      });
    });
    </script>
</body>

